<template>
    <file-list 
      ref="fileList"
      dir-path="function" 
      placeholder="请选择要查看的功能示例"
      @before-load="handleBeforeLoad" 
    />
  </template>
  
  <script>
  import FileList from '@/components/FileList';
  
  export default {
    components: {
      FileList
    },
  
    data() {
      return {
        loadedScripts: new Set() // 用于跟踪已加载的脚本
      };
    },
  
    mounted() {
      // 预加载一些必要的脚本
      this.loadVideoJS();
    },
  
    methods: {
      // 加载外部脚本
      loadExternalScript(src, type = 'js') {
        if (this.loadedScripts.has(src)) {
          return Promise.resolve();
        }
  
        return new Promise((resolve, reject) => {
          if (type === 'css') {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = src;
            link.onload = () => {
              this.loadedScripts.add(src);
              resolve();
            };
            link.onerror = reject;
            document.head.appendChild(link);
          } else {
            const script = document.createElement('script');
            script.src = src;
            script.onload = () => {
              this.loadedScripts.add(src);
              resolve();
            };
            script.onerror = reject;
            document.body.appendChild(script);
          }
        });
      },
  
      // 加载视频相关脚本
      async loadVideoJS() {
        try {
          // 加载 liveplayer 相关脚本
          await this.loadExternalScript('/js/liveplayer-lib.min.js');
        } catch (error) {
          console.error('加载视频相关脚本失败:', error);
        }
      },
  
      // 在加载组件之前的处理
      async handleBeforeLoad(file) {
        if (file.includes('liveplayer') || file.includes('video-player')) {
          await this.loadVideoJS();
          // 等待 videojs 加载完成
          await new Promise((resolve) => {
            const checkVideoJS = setInterval(() => {
              if (window.videojs) {
                clearInterval(checkVideoJS);
                resolve();
              }
            }, 100);
          });
        }
      }
    }
  };
  </script> 